import { BlockEnum, NodeProps } from '@/components/workflow/types'
import { useWorkFlowStore } from '@/store/workflowStore'
import type { FC } from 'react'
import React, { useEffect, useState } from 'react'
import { ComponentDescMap } from '../../constants'
import DisplayCont from '../components/DisplayCont'
import '../style.less'

const EndNode: FC<NodeProps<any>> = ({ id, data }: any) => {
  const { flowVariables } = useWorkFlowStore()
  const [list, setList] = useState([])
  const [firstThreeItems, setFirstThreeItems] = useState([])
  const [outputType, setoutputType] = useState('')
  useEffect(() => {
    const outputs = flowVariables[data.id]?.outputs || []
    setoutputType(flowVariables[data.id]?.outputType)
    // if (flowVariables[data.id]?.outputType === 'text') {
    //   outputs = [
    //     {
    //       variable: flowVariables[data.id]?.outputText || ''
    //     }
    //   ]
    // }
    setList(outputs)
    if (outputs.length > 0) {
      setFirstThreeItems(outputs.slice(0, 3))
    }
  }, [data.id, flowVariables])
  return (
    <div className="workflow-common-node">
      <div className="common-node-desc">{data.desc || ComponentDescMap[BlockEnum.End]}</div>
      {/* 输出 */}
      <div className="nodrag mapLLMNode_case cursor-default">
        <DisplayCont firstThreeItems={firstThreeItems} list={list} title={'输出'}></DisplayCont>
        {/* 输出类型 */}
        <div className="flexRowStart mb-[8px] w-[100%]">
          <span className="pandl_node_title">输出类型：</span>
          <span
            style={{ fontSize: '12px' }}
            className="semi-typography coz-typography coz-text semi-typography-primary semi-typography-normal font-normal leading-[20px]"
          >
            {outputType === 'outputs' ? '返回变量' : '返回文本'}
          </span>
        </div>
      </div>
    </div>
  )
}

export default React.memo(EndNode)
